<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 设置布局视口的宽度 -->
    <!-- <meta name="viewport" content="width=500" /> -->
    <!-- device 设备  width 宽度  设置布局视口大小与『设备独立像素宽度』同宽-->
    <!-- <meta name="viewport" content="width=device-width" /> -->
    <!-- initial 初始化  scale 比例   『设备独立像素宽度 与 布局视口宽度的比例』 -->
    <!-- <meta name="viewport" content="initial-scale=0.5" /> -->
    <!-- <meta name="viewport" content="initial-scale=1" /> -->
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1" /> -->
    <!-- <meta name="viewport" content="width=600, initial-scale=1" /> -->

    <!-- minimum-scale minimum 最小  『设备独立像素宽度 与 视觉视口宽度』  -->
    <!-- <meta name="viewport" content="minimum-scale=1" /> -->
    <!-- <meta name="viewport" content="maximum-scale=1" /> -->
    <!-- 控制页面不能缩放 -->
    <!-- <meta name="viewport" content="maximum-scale=1, minimum-scale=1" /> -->
    <!-- 设置用户不允许缩放页面 -->
    <!-- <meta name="viewport" content="user-scalable=yes" /> -->

    


    <title>viewport</title>
</head>
<body>
    <div id="box">

    </div>
    <script>
        const box = document.querySelector("#box");
        // console.log(document.documentElement.clientWidth);
        setInterval(() => {
            box.innerHTML = '布局视口的大小为: '
                +document.documentElement.clientWidth 
                + '<br>视觉视口的大小为:'
                + window.visualViewport.width
        }, 500);

    </script>
</body>
</html>